<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title id="titleId">今日头条</title>
		<link rel="stylesheet" type="text/css" href="../css/news/public.css">
		<script src="../js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
		$(function (){
			/*拿到用户的账号信息,如果用户没有登录,那么用户的账号信息一定为空*/
			var account = window.sessionStorage.getItem("account");
			/*登陆成功后显示账号*/
			if(account!=null){
				var userinfro="<ul>\n" +
						"                    <li><a href=\"javaScript:void(0)\" onclick=\"exit()\">退出</a></li>\n" +
						"                </ul>\n" +
						"                <!--显示账号信息  点击用户名跳转到用户中心-->\n" +
						"                <a href=\"../user/member_center.html\">\n" +
						"                <span id=\"accountId\"> </span>\n" +
						"                </a>";
				$("#userlogoId").html(userinfro);
			$("#accountId").html("欢迎"+account+"登录");
			}
				$.get("../website/getWebSite", function(res){
					/*一进入页面就将页面标题修改*/
					$("#titleId").html(res.data.webName);
					console.log("测试网站信息查询时是否拿到信息"+res);
					if (res==500){
						alert("服务器忙!");
					}
					else {
						var str="© 2021";
						str+=res.data.webName;
						str+="  备案号"+res.data.recordNumber+"号"+"<br/>";
						str+="联系电话:"+res.data.contact+"<br/>";
						str+="公司名称:"+res.data.companyName;
						str+=" <a href='../admin/login.html'>管理员登录</a>";

						$("#webinfor1").html(str);

						//显示公司logo
						var logoname=res.data.logoName;
						console.log("logo文件名"+logoname);
						//如果有头像就显示
						if (logoname!="null"){
							var imgsrc="http://127.0.0.1:8080/companyLogo/"+"/"+logoname;
							document.getElementById("logoId").innerHTML = "<img src='" + imgsrc + "' width='200' height='90'/>";
						}
					}
				},"json");

				//这里是显示广告信息
			$.get("../advertising/getadvertisingList",function (res){
				console.log(res);
				var str="";
				for (var i = 0; i < res.data.length; i++) {
					var advertising="http://127.0.0.1:8080/advertisingphoto/"+"/"+res.data[i].pictureName;
					str+="<a href ='"+res.data[i].linkAddress +"'"+">";
					/*由于p3广告位太长,所以需要控制一下图片大小*/
					if (res.data[i].location=="p3"){
						str+="<img src='"+ advertising+"' width=\"800px\" height=\"90px\" "+"/>";
					}else {
						str+="<img src='"+ advertising+"'"+"/>";
					}
					str+="</a>";
					document.getElementById(res.data[i].location).innerHTML=str;
					str="";
				}

			},"json")

			//这里显示出所有的新闻类型()
			$.get("../newstype/getnewtpyeList",function (res){
				var str="<li>\n" +
						"\t  \t\t \t\t    <a href=\"https://www.toutiao.com/a7040331353040110114/?log_from=ceae0f3e0aef1_1639226082716\" class=\"active\">最新推荐</a>\n" +
						"\t  \t\t \t\t     <ul class=\"sub-menu\"></ul>\n" +
						"\t  \t\t \t\t</li>";
				for (var i = 0; i <res.data.length; i++){
					str+="  <li onclick='tonews("+res.data[i].id+")'> <a href=\"javaScript:void(0)\" class=\"sf-with-ul\">"+ res.data[i].journame+"</a></li>";
				}
				$("#newstpyeId").html(str);
				console.log(str);
			},"json")

				/*显示出友情链接*/
			$.get("../friendlink/getfriendlinklist",function (res){
				console.log("这里显示出所有的友情链接"+res)
				var str="";
				for (var i=0;i<res.data.length;i++){
					str+="<a href='"+res.data[i].url+"'>"+res.data[i].linkname+"</a>";
					str+="&nbsp;&nbsp;&nbsp;&nbsp;";
				}
				$("#friendlinkId").html(str);
			},"json")
			/*这里显示推荐文章*/
			$.get("../news/getmaxlike",function (res){
				console.log("最多喜欢的新闻"+res)
				var str=""
				for (let i = 0; i <res.data.length ; i++) {
					str+=" <li>\n" +
							"\t\t\t                    <div class=\"artl\">\n" +
							"\t\t\t                        <a href=\"javaScript:void(0)\" onclick='newsArea(" + res.data[i].id + ")'>\n" +
							"\t\t\t          			 <p>"+res.data[i].newssummary+"</p>\n" +
							"\t\t\t                        </a>\n" +
							"\t\t\t                        <label>"+new Date(res.data[i].publish_time).toLocaleString()+"</label>\n" +
							"\t\t\t                    </div>\n" +
							"\t\t\t                    \n" +
							"\t\t\t                    <div class=\"artr\">"+
							"\t\t\t\t\t\t\t<a href=\"javaScript:void(0)\" ><img src='" + "http://127.0.0.1:8080/newscover/" + res.data[i].coverimage + "' onclick='newsArea(" + res.data[i].id + ")'></a>   \n"
					str+="  </div>\n" +
							"\t\t\t                </li>"
					$("#maxnewsId").append(str);
					str = "";
				}

			},"json")


			/*这里显示点击最多的文章*/
			$.get("../news/getmaxpraise",function (res){
				console.log("点击最多的新闻"+res)
				var str=""
				for (let i = 0; i <res.data.length ; i++) {
					str+=" <li>\n" +
							"\t\t\t                    <div class=\"artl\">\n" +
							"\t\t\t                        <a href=\"javaScript:void(0)\"  onclick='newsArea(" + res.data[i].id + ")'>\n" +
							"\t\t\t          			 <p>"+res.data[i].newssummary+"</p> \n" +
							"\t\t\t                        </a>\n" +
							"\t\t\t                        <label>"+new Date(res.data[i].publish_time).toLocaleString()+"</label>\n" +
							"\t\t\t                    </div>\n" +
							"\t\t\t                    \n" +
							"\t\t\t                    <div class=\"artr\">"+
							"\t\t\t\t\t\t\t<a href=\"javaScript:void(0)\" ><img src='" + "http://127.0.0.1:8080/newscover/" + res.data[i].coverimage + "' onclick='newsArea(" + res.data[i].id + ")'></a>   \n"
					str+="  </div>\n" +
							"\t\t\t                </li>"
					$("#maxlikenew").append(str);
					str = "";
				}

			},"json")

			/*这里显示最新发布的文章*/
			$.get("../news/getlatestnews",function (res){
				console.log("最新发布的新闻"+res)
				var str=""
				for (let i = 0; i <res.data.length ; i++) {
					str+=" <li>\n" +
							"\t\t\t                    <div class=\"artl\">\n" +
							"\t\t\t                        <a href=\"javaScript:void(0)\"  onclick='newsArea(" + res.data[i].id + ")'>\n" +
							"\t\t\t          			 <p>"+res.data[i].newssummary+"</p> \n" +
							"\t\t\t                        </a>\n" +
							"\t\t\t                        <label>"+new Date(res.data[i].publish_time).toLocaleString()+"</label>\n" +
							"\t\t\t                    </div>\n" +
							"\t\t\t                    \n" +
							"\t\t\t                    <div class=\"artr\">"+
							"\t\t\t\t\t\t\t<a href=\"javaScript:void(0)\" ><img src='" + "http://127.0.0.1:8080/newscover/" + res.data[i].coverimage + "' onclick='newsArea(" + res.data[i].id + ")'></a>   \n"
					str+="  </div>\n" +
							"\t\t\t                </li>"
					$("#newsareaId").append(str);
					str = "";
				}

			},"json")


			/*以进入页面就查询出前五个新闻的封面放进滑动窗口*/
			$.get("../news/getimglist",function (res){
				console.log("这里是查询到的新闻封面和新闻链接"+res);
				//先将第一张显示
				var i=0;
				var str="";
				str+="<a href=\"javaScript:void(0)\"  onclick='newsArea(" + res.data[i].id + ")'>\n" +
						"\t\t\t\t\t\t\t\t<img src='" + "http://127.0.0.1:8080/newscover/" + res.data[i].coverimage + "'>\n" +
						"\t\t\t\t\t\t\t\t<h3 class=\"slide-title\" id=\"news1zyId\">"+res.data[i].newssummary+"</h3>\n" +
						"\t\t\t\t\t\t\t</a>"
				$("#windowimgId").html(str);
				/*写左右箭头切换图片的功能*/
				//左箭头上一张
				$(".swiper-button-prev").click(function (){
					if (i==0){
						i=res.data.length-1;
					}else {
						i--;
					}
					var str="";
					str+="<a href=\"javaScript:void(0)\"  onclick='newsArea(" + res.data[i].id + ")'>\n" +
							"\t\t\t\t\t\t\t\t<img src='" + "http://127.0.0.1:8080/newscover/" + res.data[i].coverimage + "'>\n" +
							"\t\t\t\t\t\t\t\t<h3 class=\"slide-title\" id=\"news1zyId\">"+res.data[i].newssummary+"</h3>\n" +
							"\t\t\t\t\t\t\t</a>"
					$("#windowimgId").html(str);
					str="";
				})
				/*右箭头下一张*/
				$(".swiper-button-next").click(function (){
					if (i==res.data.length-1){
						i=0;
					}else {
						i++;
					}
					var str="";
					str+="<a href=\"javaScript:void(0)\"  onclick='newsArea(" + res.data[i].id + ")'>\n" +
							"\t\t\t\t\t\t\t\t<img src='" + "http://127.0.0.1:8080/newscover/" + res.data[i].coverimage + "'>\n" +
							"\t\t\t\t\t\t\t\t<h3 class=\"slide-title\" id=\"news1zyId\">"+res.data[i].newssummary+"</h3>\n" +
							"\t\t\t\t\t\t\t</a>"
					$("#windowimgId").html(str);
					/*$("#newsareaId").html("");*/
					str="";
				})
			},"json")

			/*下面三个模块的功能分别是:
			* 1.自动定时切换图片
			* 2.鼠标移入图片取消自动切换图片
			* 3.鼠标移出图片重新触发自动切换图片*/

			/*每两秒触发一次下一张的功能*/
			const automatic = setInterval(function () {
				$(".swiper-button-prev").click();
			}, 2000);


			//鼠标悬浮
			$("#windowimgId").hover(function(){
				//取消定时切换
				console.log("鼠标移入,图片不动")
				clearInterval(automatic);
			});
})



			//点击新闻导航跳转到相应类型的新闻(直接将主页面的内容修改)
		function  tonews(id){
			//这里显示测试查询出所有的新闻
			$.get("../news/getnewsList",{id:id},function (res){
				if (res.data.length==0){
					alert("暂时没有此类型的新闻,正在联系管理员上传!")
				}else {

					for (let i = 0; i < res.data.length; i++) {
						//将内容显示到新闻区(中间)
						var str = "<div class=\"lista\">\n" +
								"\t\t\t\t<h3>\n" +
								"\t\t\t\t\t<a href=\"javaScript:void(0)\" id=\"news1titleId\" onclick='newsArea(" + res.data[i].id + ")'>" + res.data[0].title + "</a>\n" +
								"\t\t\t\t</h3>\n" +
								"\t\t\t\t<div class=\"pov\">\n" +
								"\t\t\t\t\t<div class=\"sview\">\n" +
								"\t\t\t\t\t\t<div class=\"sviewl\">\n" +
								"\t\t\t\t\t\t\t<div class=\"tittop\">\n" +
								"\t\t\t\t\t\t\t\t<b id=\"pubtimeId\">发布于" + new Date(res.data[i].publish_time).toLocaleString() + "</b>\n" +
								"\t\t\t\t\t\t\t</div>\n" +
								"\t\t\t\t\t\t\t<div class=\"art_summary\">\n" +
								"\t\t\t\t\t\t\t\t<p id=\"newszyId\" onclick='newsArea()'>" + res.data[i].newssummary + "</p>\n" +
								"\t\t\t\t\t\t\t</div>\n" +
								"\t\t\t\t\t\t\t<div class=\"footbar\">\n" +
								"\t\t\t\t\t\t\t <i class=\"footbar-category\"><a href=\"javascript:void(0)\" id=\"\">互联网</a></i>\n" +
								"\t\t\t\t\t\t\t\t   <i class=\"footbar-like\"><a href=\"javascript:;\">阅读" + res.data[i].clicknum + "</a></i>\n" +
								"\t\t\t\t\t\t\t</div>\n" +
								"\t\t\t\t\t\t</div>\n" +
								"\t\t\t\t\t\t<!--封面图-->\n" +
								"\t\t\t\t\t\t<div class=\"sviewr\">\n" +
								"\t\t\t\t\t\t\t<a href=\"javaScript:void(0)\" ><img src='" + "http://127.0.0.1:8080/newscover/" + res.data[i].coverimage + "' onclick='newsArea(" + res.data[i].id + ")'></a>   \n" +
								"\t\t\t\t\t\t</div>\n" +
								"\t\t\t\t\t\t\n" +
								"\t\t\t\t\t</div>\n" +
								"\t\t\t\t</div>\n" +
								"\t\t\t</div>"
						$("#newsareaId").html(str);
						str = "";
					}
				}

			},"json");
		}
		//1.显示新闻的内容
		//当需要显示新闻内容的时候,将新闻的id传到要跳转的网页中去
		function newsArea(id){
				//跳转到修改页面时,将要修改的用户id跟着网站地址传过去
			var cs=	location.assign("newscontent.html?id="+id);
				//这里需要将用户的登录信息也传过去
			}


		/*将搜索文本框的内容发送到前端
		* 返回出关键字匹配的新闻*/
		function serch(){
			$.post("../news/serch",$("#searchform").serialize(),function (res){
				if (res.code==201||res.code==500){
					alert("请输入正确的关键字");
				}
				else {
					if (res.data.length==0) {
						alert("没有查询到结果,请重新搜索关键字")
					} else {
						alert("查询成功");
						//将查询的结果返回到新闻显示区
						for (let i = 0; i < res.data.length; i++) {
							//将内容显示到新闻区(中间)
							var str = "<div class=\"lista\">\n" +
									"\t\t\t\t<h3>\n" +
									"\t\t\t\t\t<a href=\"javaScript:void(0)\" id=\"news1titleId\" onclick='newsArea(" + res.data[i].id + ")'>" + res.data[0].title + "</a>\n" +
									"\t\t\t\t</h3>\n" +
									"\t\t\t\t<div class=\"pov\">\n" +
									"\t\t\t\t\t<div class=\"sview\">\n" +
									"\t\t\t\t\t\t<div class=\"sviewl\">\n" +
									"\t\t\t\t\t\t\t<div class=\"tittop\">\n" +
									"\t\t\t\t\t\t\t\t<b id=\"pubtimeId\">发布于" + new Date(res.data[i].publish_time).toLocaleString() + "</b>\n" +
									"\t\t\t\t\t\t\t</div>\n" +
									"\t\t\t\t\t\t\t<div class=\"art_summary\">\n" +
									"\t\t\t\t\t\t\t\t<p id=\"newszyId\" onclick='newsArea()'>" + res.data[i].newssummary + "</p>\n" +
									"\t\t\t\t\t\t\t</div>\n" +
									"\t\t\t\t\t\t\t<div class=\"footbar\">\n" +
									"\t\t\t\t\t\t\t <i class=\"footbar-category\"><a href=\"javascript:void(0)\" id=\"\">互联网</a></i>\n" +
									"\t\t\t\t\t\t\t\t   <i class=\"footbar-like\"><a href=\"javascript:;\">阅读" + res.data[i].clicknum + "</a></i>\n" +
									"\t\t\t\t\t\t\t</div>\n" +
									"\t\t\t\t\t\t</div>\n" +
									"\t\t\t\t\t\t<!--封面图-->\n" +
									"\t\t\t\t\t\t<div class=\"sviewr\">\n" +
									"\t\t\t\t\t\t\t<a href=\"javaScript:void(0)\" ><img src='" + "http://127.0.0.1:8080/newscover/" + res.data[i].coverimage + "' onclick='newsArea(" + res.data[i].id + ")'></a>   \n" +
									"\t\t\t\t\t\t</div>\n" +
									"\t\t\t\t\t\t\n" +
									"\t\t\t\t\t</div>\n" +
									"\t\t\t\t</div>\n" +
									"\t\t\t</div>"
							$("#newsareaId").html(str);
							str = "";
						}
					}
				}
			},"json")
		}


		/*用户登录*/
		function login(){
			location.replace("../user/userLogin.html");
			var account = window.sessionStorage.getItem("account");
		}

		function exit(){
			if(confirm("您确定要退出吗?")){
				//删除前端浏览器存储的用户信息
				window.sessionStorage.removeItem("account");
				$.get("../login/loginOut",function (res){
					location.replace("../back/index.html");
				})
			}
		}

		</script>


</head>
<body>
  <div>
	  <!-- 顶部 -->
	  <div class="top">
	  	  <div class="top_content">
	  		<div class="top_logo" id="logoId">
				<!--这里显示网站信息中的公司logo-->
	  			<a href="">
	  				<img src="../img/news/logo.png" />
	  			</a>
	  		</div>
	  		<div class="advert" id="p3">
				<!--顶部广告-->
	  			<a href="" target="_blank">
	  				<img src="../img/news/advert.jpg"/>
	  			</a>
	  		</div>


	  		<div class="user" id="userlogoId">
				<!--用户登录-->
	  			<a href="../user/userLogin.html">
	  				<button type="button" class="login" id="accountId" onclick="login()">登录</button>
	  			</a>
	  		</div>

	  		<div style="clear: left;"></div>
	  	</div>
	  </div>
	  <!-- 内容区 -->
	  <div id="main_box">
	  	 <div class="left">
	  		 <div class="left-col">
	  		     <div class="nav">
	  		       <ul class="sf-menu sf-arrows" id="newstpyeId">
	  		 		<!--新闻导航专区-->
	  		 	  </ul>
	  		     </div>
	  		 </div>
	  	 </div>

		 <!--中间区域-->
	  	<div class="middle" id="middleId">
		   <!---轮播内容-->
			<div class="gslider">
				<!-- 图片滑动 -->
				<div class="swiper-container swiper-container-initialized swiper-container-horizontal">
					<div class="swiper-wrapper" >
						<div class="swiper-slide swiper-slide-active" style="width: 770px;" id="windowimgId">

							<!--滑动窗口动态显示区域-->
							<a href="javaScript:void(0)" onclick='newsArea(" + res.data[i].id + ")'>
								<img src=''>
								<h3 class="slide-title" id="news1zyId">+res.data.[i].newssummary+</h3>
							</a>

						</div>
			  </div>
				<!-- 分页器 -->
				<div class="swiper-pagination"></div>
				<!-- 导航按钮 -->
				<div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"></div>
				<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" onclick="changeimg()"></div>
				<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
			</div>



		<!--文章容器  文章列表开始-->
			<!--第一个新闻的区域-->
			<div class="sitebar-article">
				<h2><span>最新发布</span></h2>
				<div class="sitebar-article-list">
					<ul>
						<!--最新发布文章列表-->

						<div class="sitebar-article-list" id="newsareaId">
						</div>

					</ul>
				</div>
			</div>


		<!--<div class="recent-content">
			<h2><span>最新发布</span></h2>
			<ul>
			<div id="newsareaId">
				&lt;!&ndash;最新发布&ndash;&gt;
			</div>
			</ul>

	  	</div>-->



		</div>
		  <!--中间区域截止到这里结束-->
		<div class="right">
			 <div class="searchbox">
			        <form id="searchform" method="get" action="">
			            <input type="search" name="keyWords" class="search-input" value="" placeholder="请输入新闻关键词" autocomplete="off">
			            <button type="button" class="search-submit" onclick="serch()">搜索</button>
			        </form>
			    </div>
				<!--广告图-->
			    <div class="ali" id="p1">
			        <a href="">
			            <img src="../img/news/ay.jpg">
			        </a>
			    </div>
				<!--推荐文章-->
			    <div class="sitebar-article">
			        <h2><span>推荐文章</span></h2>
			        <div class="sitebar-article-list">
			            <ul>
						<!--推荐文章列表-->

							<div class="sitebar-article-list" id="maxlikenew">
							</div>

			            </ul>
			        </div>
			    </div>
			
			    <!--广告位-->
			    <div class="ali" id="p2">

			    </div>
				
			<!--点击最多的文章-->
			    <div class="sitebar-article">
			        <h2><span>点击最多的文章</span></h2>

			        <div class="sitebar-article-list">
			            <ul>
							<div class="sitebar-article-list" id="maxnewsId">
							</div>
			            </ul>
			        </div>




			    </div>
			</div>
			<div style="clear: left;"></div>
			<!-- 底部友情链接,网站信息 -->
			<div class="main_bottom">
				<div class="main_bottom_link">
					<div class="main_bottom_link_title">友情链接</div>
					<div class="main_bottom_link_content" id="friendlinkId">
						<!--这里显示出友情链接-->
					</div>
				</div>
				<div class="main_bottom_info">
							<span id="webinfor1"></span>
				</div>
			</div>
		</div>
  </div>	
</body>
</html>
